<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			*{
				margin:0 ;
				padding:0 ;
				
			}
			.box{
				position: relative;
				left: 200px;
				top: 100px;
				width: 500px;
				height: 1600px;
				background-color: aquamarine;
				
			}
			.box1{
				position:absolute;
				top:50px;
				left: 150px;
				width: 300px;
				height: 300px;
				background-color: blue;
				
			}
			.box2{
				width: 150px;
				height: 200px;
				background-color: powderblue;
				
			}
			.callme{
				position: fixed;
				right: 0;
				top: 50%;
				width: 50px;
				height: 150px;
				background-color: black;
				
			}
		</style>
	</head>
	<body>
		<!-- 定位
		 1.静态定位static,默认定位方式
		 相对定位relativc,相交自己的位置进行偏移.
		 绝对定位adsolute，相对于有定位的父级盒子进行偏移，如果父级盒子都没有定位，则相交于body进行偏移
		 相对定位不脱标,绝对定位的盒子会脱标！
		 经典运用：
		 大相小绝（子绝父消）
		 固定偏移ficxed，相对于body进行偏移。位置固定不动。
		 2.偏移量：
		 toy上、tottom下、left左，right右
		 z-index:等级默认级；
		 去掉a标签的下划线text-emphasis: none;
		去掉列表的黑点点；
		 -->
		<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		</div>
		<div class="callme"></div>
	</body>
</html>
